<template>
	<div class="topMains">
		<div class="l none">
			<el-popover popper-class="userPop" placement="bottom" width="278" id="userTops" @show="showEvent" trigger="hover">
				<div class="mesBox regular" id="mesBox" v-if="isMegShow">
					<h2>您有<span>0条</span>未读消息</h2>
					<ul class="infinite-list" style="overflow:auto">

						<li v-for="item in list" :key="item.id" class="infinite-list-item">
							<div class="listL">
								<el-avatar :size="size" :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"></el-avatar>
							</div>
							<div class="listR">
								<h3>{{ item.info }}</h3>
								<p>{{ item.createTime | timers }}</p>
							</div>
						</li>

					</ul>
					<router-link to="/message" tag="h4" style="cursor: pointer;">查看所有消息 ></router-link>

				</div>
				<el-badge slot="reference" :value="num" class="item">
					<img :src="mes" style="height:20px;" alt="">
				</el-badge>

			</el-popover>
		</div>
		
		<div class="vip" style="margin-left: 10px;" v-if="show">
			<el-popover placement="bottom" width="280" trigger="click" popper-class="vip-popper" :visible-arrow="false">
				<div class="vip-wrap">
					<p class="vip-title">开通VIP即可获得</p>
					<div class="vip-icon-box">
						<div class="vip-icon-item">
							<img :src="vipIcon1" />
							<p>海量数据</p>
						</div>
						<div class="vip-icon-item">
							<img :src="vipIcon2" />
							<p>无限使用</p>
						</div>
						<div class="vip-icon-item">
							<img :src="vipIcon3" />
							<p>数据分析</p>
						</div>
						<div class="vip-icon-item">
							<img :src="vipIcon4" />
							<p>1V1客服</p>
						</div>
					</div>
					<div class="vip-btn" v-if="!show" @click="openVip">
						立即开通
					</div>
					<div class="vip-date" v-if="show">VIP到期时间：<span style="color: #F56C6C;">{{userInfo.vipEndTime | formatDate}}</span></div>
					<!-- <div class="vip-btn" v-if="show">
						已开通
					</div> -->
				</div>
				<!-- <router-link to="/vip_pay" class="vip-box" slot="reference" v-if="show">
					<img :src="vipIcon" width="40px" height="40px" />
				</router-link> -->
				<!-- <div class="vip-box" slot="reference" v-if="show">
					<img :src="vipIcon" width="32px" height="32px" />
				</div> -->
				
			</el-popover>
		</div>
		
		<div class="vip-box m-vip-box" slot="reference" @click="openVip">
			<img :src="vipIcon" width="32px" height="32px" />
		</div>

		
		<router-link to="/info" v-if="!$route.path.includes('/info')" tag="div" class="l kzt" style="padding:0;">控制台</router-link>
		
		
		
		<div class="r">

			<el-popover placement="bottom" width="240" id="userInfos" trigger="click">
				<div class="topss">
					<dl>
						<dt>
							<div class="ava">
								<img src="../assets/images/isVip.png" class="isVip" v-if="show"/>
								<el-avatar v-if="userInfo.headImgUrl != null && !wechat" class="avatar" :size="60" :src="userInfo.headImgUrl">111</el-avatar>
								<el-avatar v-else-if="userInfo.wxHeadImgUrl != null && wechat" class="avatar" :size="60" :src="userInfo.wxHeadImgUrl">111</el-avatar>
								<el-avatar v-else class="avatar" :size="60" :src="circleUrl"></el-avatar>
							</div>
							<div>
								{{ userInfo.nickName == null ? "name" :  userInfo.nickName }}
							</div>
						</dt>
						<router-link tag="dd" to="/info/zlsz/uptPass">修改密码</router-link>
					</dl>
				</div>
				<h4 class="el-butten" @click="logout" style="font-size:14px;line-height:50px;color: #d2d7f4;background: #405cda;text-align: center;">退出登陆</h4>
				<div slot="reference" class="ava">
					<img src="../assets/images/isVip.png" class="isVip" v-if="show"/>
					<!-- <el-avatar class="avatar" :size="32" :src="userInfo.headImgUrl?userInfo.headImgUrl:circleUrl"></el-avatar> -->
					<el-avatar v-if="userInfo.headImgUrl != null && !wechat" class="avatar" :size="40" :src="userInfo.headImgUrl">111</el-avatar>
					<el-avatar v-else-if="userInfo.wxHeadImgUrl != null && wechat" class="avatar" :size="40" :src="userInfo.wxHeadImgUrl">111</el-avatar>
					<el-avatar v-else class="avatar" :size="32" :src="circleUrl"></el-avatar>
					<i class="el-icon-caret-bottom"></i>
				</div>

			</el-popover>
		</div>
		
	</div>
</template>

<script>
	import mes from "@/assets/images/backstage/message.svg"
	import vipIcon from "@/assets/images/vip_icon.png"
	import icons from "@/assets/images/avatar/img1.png"
	import vipIcon1 from "@/assets/images/vip-icon1.png"
	import vipIcon2 from "@/assets/images/vip-icon2.png"
	import vipIcon3 from "@/assets/images/vip-icon3.png"
	import vipIcon4 from "@/assets/images/vip-icon4.png"
	import {
		formatDate
	} from "@/util/util.js"
	export default {
		data() {
			return {
				isMegShow: true,
				mes,
				vipIcon,
				vipIcon1,
				vipIcon2,
				vipIcon3,
				vipIcon4,
				visible: false,
				num: 1,
				size: 28,
				circleUrl: icons,
				texts: "",
				// userInfo:{},
				show:false,
				list: [

				],
				userInfo:{
					headImgUrl: "",
					vipEndTime:""
				},
				wechat: sessionStorage.getItem('wechat'),
			}
		},
		mounted() {
			console.log(sessionStorage.getItem('wechat'), 'pp')
		},
		filters: {
			timers(val) {
				return new Date(val).toLocaleString();
			},
			formatDate(time) {
				var date = new Date(time);
				return formatDate(date, 'yyyy年MM月dd日 hh:mm');
			}
		},
		methods: {
			openVip(){
				// to="/vip_pay" 
				this.$router.push({
					path:'/vip_pay'
				})
			},
			aa() {
				alert(1)
			},
			getUserInfo() {
				this.$ajax.post("/user/getInfo")
					.then(res => {
						this.userInfo = res.data.data;
						let nowDate = new Date().getTime()
						if (res.data.data.vipEndTime > nowDate) {
							// this.userInfo.vipEndTime = res.data.data.vipEndTime
							this.show = true
							this.$store.commit('show',true)
						} else {
							this.show = false
							this.$store.commit('show',false)
						}
						sessionStorage.setItem("info", JSON.stringify(res.data.data));
					})
			},
			showEvent() {
				// console.log("出现了");
				this.$ajax.post("/user/userReadMessage")
					.then(res => {
						this.getNum();
						// if(res.data.code == 0){
						//     this.num = res.data.data;
						// }else{
						//     this.$message.error("数据获取失败!")
						// }
					})
			},
			getNum() {
				this.$ajax.post("/user/getUnReadCount")
					.then(res => {

						if (res.data.code == 0) {
							this.num = res.data.data;
						} else {
							this.$message.error("数据获取失败!")
						}
					})
			},
			init() {
				this.$ajax.post("/sysMessage/userMessage", {
						pageIndex: 1,
						pageSize: 3
					})
					.then(res => {
						if (res.data.code == 0) {
							this.list = res.data.data.list;
						} else {
							this.$message.error("数据获取失败!")
						}
					})
			},
			logout() {
				this.$ajax.post("/user/logout")
					.then(res => {

						if (res.data.code == 0) {
							localStorage.clear();
							sessionStorage.removeItem('wechat');
							console.log('ppp')
							this.$message({
								type: "success",
								message: "退出成功,即将跳转到登陆页"
							});
							setTimeout(() => {
								this.$router.push("/userLogin")
							}, 1000)

						}
					})
			}
		},
		created() {
			if (this.$route.path == "/info/zhzl") {
				this.texts = "账户总览"
			}
			if (this.$route.path == "/info/qmjl") {
				this.texts = "起名记录"
			}
			if (this.$route.path == "/info/fkjl") {
				this.texts = "付款记录"
			}
			if (this.$route.path == "/info/zlsz") {
				this.texts = "资料设置"
			}
			if (this.$route.path == "/info/lxkf") {
				this.texts = "联系客服"
			}
			if (this.$route.path == "/info/zlsz/uptPass") {
				this.texts = "修改密码"
			}
			this.init();
			this.getUserInfo();
			this.getNum();
			let userInfo = JSON.parse(sessionStorage.getItem("info"));
			
		}
	}
</script>

<style lang="scss">
@media screen and (max-width:700px) {
	.m-vip-box{
		display: block;
	}
}

@media screen and (min-width:700px) {
	.m-vip-box{
		display: none;
	}
}
	.ava{
		display: flex;
		flex-direction: row;
		align-items: center;
		outline: none;
		position: relative;
		.isVip{
			position: absolute;
			width: 18px;
			height: 18px;
			bottom: -5px;
			left: 30px;
			transform: translateX(-50%);
		}
	}
	.vip{
		display: none;
	}
	
	@media screen and (max-width:450px) {
		// .none{
		// 	display: none!important;
		// }
		.isVip{
			position: absolute;
			width: 15px!important;
			height: 15px!important;
			bottom: 0!important;
			left: 30px!important;
			transform: translateX(-50%)!important;
		}
		.vip{
			display: inline-flex!important;
			flex-direction: row;
			align-items: center;
		}
		.vip-box{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.el-badge__content.is-fixed{
			top: 50%!important;
			transform: translate(120%,-120%)!important;
		}
	}
	
	.vip-date{
		text-align: center;
	}
	.vip-title {
		position: absolute;
		top: 0;
		transform: translateY(-12px);
		left: -1px;
		right: -1px;
		display: flex;
		align-items: center;
		padding-top: 12px;
		justify-content: center;
		width: calc(100% + 2px);
		font-size: 18px;
		color: #FFF;
		height: 55px;
		text-align: center;
		background: url(../assets/images/vip-title-bg.png) top center no-repeat;
		background-size: 100%;
	}
	.vip-wrap {
		width: calc(100% + 2px);
		min-height: 100px;
		background-color: #FFF;
		overflow: hidden;
		padding-top: 20px;
	
		.vip-icon-box {
			width: 100%;
			height: auto;
			margin: 18px 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
	
			.vip-icon-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-right: 15px;
	
				&:last-child {
					margin-right: 0;
				}
	
				img {
					width: 40px;
					height: 40px;
				}
	
				p {
					font-size: 12px;
					color: #4f4f4f;
					margin-top: 5px;
				}
			}
		}
	
		.vip-btn {
			display: block;
			width: 150px;
			height: 40px;
			background: linear-gradient(0deg, #405CDA, #86A6F2);
			box-shadow: 0px 6px15px rgba(154, 145, 229, 0.3);
			border-radius: 30px;
			margin: 0 auto 15px;
			text-align: center;
			line-height: 40px;
			font-size: 15px;
			color: #FFF;
		}
	}
	.el-butten:hover,
	.el-butten:focus {
		opacity: .8;
		color: #fff;
		cursor: pointer;
	}

	#userInfos {
		.el-popover__reference {
			display: flex;
			align-items: center;
		}
	}

	.topss {
		dl {
			display: flex;
			align-items: center;
			// justify-content: center;
			flex-direction: column;

			dt {
				>div {
					padding: 9px;
					text-align: center;
				}
			}

			dd {
				width: 100%;
				line-height: 44px;
				text-align: center;
				border-top: 1px solid #e9e9e9;
			}
		}

		h4 {
			// font:14px/50px "";
			font-size: 14px;
			line-height: 50px;
			color: #d2d7f4;
			background: #405cda;
			text-align: center;
		}
	}

	.userPop {
		padding: 0;
		border-radius: 8px !important;
		overflow: hidden;

		>img {}
	}

	#userTops {
		display: flex;
		align-items: center;

	}

	#mesBox {

		// position: absolute;
		border-radius: 8px;
		z-index: 999;
		right: 27px;
		top: 66px;
		overflow: hidden;
		width: 278px;

		background: transparent;
		flex: 1;
		display: flex;
		flex-direction: column;
		// position: relative;
		background: #fff;
		box-shadow: 0 0 20px rgba(0, 0, 255, .3);

		// padding: 20px;
		.el-scrollbar__wrap {
			overflow-x: hidden !important;
		}

		.aa {}

		// .aa:before{
		//     width: 0;
		//     height: 0;
		//     border:9px solid #fff;
		//     border-top-color: transparent;
		//     border-left-color: transparent;
		//     border-right-color: transparent;
		//     display: block;
		//     position: absolute;
		//     content:" .";
		//     top: -18px;
		//     z-index: 999;
		//     left: calc(50% - 9px);
		// }
		h2 {
			height: 50px;
			padding-left: 24px;
			display: flex;
			align-items: center;
			color: #7e7e7e;
			font-weight: normal;
			font-size: 16px;
			line-height: 50px;
			border-bottom: 1px solid #e9e9e9;

			span {
				color: #f28787;
			}
		}

		ul {
			padding: 20px 0;
			padding-top: 0;
			// min-height:50px;
			max-height: 240px;
			height: auto !important;
			overflow: hidden;

			li {
				padding: 20px 25px 10px;
				border-bottom: 1px solid #e9e9e9;
				margin: 0 !important;
				display: flex;
				align-items: flex-start;

				h3 {
					// font: 14px/24px "";
					font-size: 14px;
					line-height: 24px;
					color: #4e4e4e;
				}

				p {
					// font:12px/20px "";
					font-size: 12px;
					line-height: 20px;
					color: #8b8b8b;
				}

				.listL {
					margin-right: 17px;
				}

			}

			li:hover {
				background-color: #EFEFEF;
			}
		}

		h4 {

			font-size: 14px;
			line-height: 50px;
			font-size: 14px;
			line-height: 50px;
			color: #d2d7f4;
			background: #405cda;
			text-align: center;
		}
	}
</style>
<style lang="scss" scoped>
	.kzt {
		height: 32px;
		margin-left: 0;
		// border-left: 2px solid #bdbdbd;
	}

	.topMains {
		display: flex;
		align-items: center;

		.l {
			padding: 0 23px;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1900;
			position: relative;
		}

		.r {
			padding-left: 22px;
			display: flex;
			align-items: center;

			// border-left: 2px solid #bdbdbd;
			.avatar {
				box-shadow: 0 0 10px #bdbebe;
			}

			.el-icon-caret-bottom {
				margin-left: 6px;
			}
		}
	}

	@media (max-width:750px) {
		
		.topMains {

			.l {
				padding-left: 0;
			}
		}

		.kzt {
			padding: 0 !important;
			padding-left: 12px !important;
			padding-right: 12px !important;
		}
	}
</style>
